
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Please sign in</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" >
    <link href="/css/sigin.css" rel="stylesheet" >
    <script src="/js/jquery.min.js"></script>

        </head>
<body>

<div class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
</div>


<br>
<br>
<div class="container" id="base">
    <form class="form-signin" method="post" action="/login">

        <label for="username" class="sr-only">Username</label>
        <input autocomplete="off" type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
    </p>
        <p>
            <label for="password" class="sr-only">Password</label>
            <input autocomplete="off" type="password" id="password" name="password" class="form-control" placeholder="Password" required>
        </p>

        <p>
            <label for="password" class="sr-only">VCode</label>
            <input autocomplete="off" type="text" id="vcode" name="vcode" class="form-control" placeholder="VCode" required>

        </p>

        <p>
            <img id="captcha" src="" onclick="doReflush(this)">
        </p>
        <input name="captchaId" id="captchaId" value="" type="hidden">
        <input name="_csrf" type="hidden" value="587464ed-e895-4683-94e6-e0901017cee4" />
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

        <span class="btn btn-default btn-block" onclick="change('sms')">短信登录</span>


    </form>
</div>

<div style="display: none" id="sms">
    <form class="form-signin" method="post" action="/login">
    <label for="mobile" class="sr-only">Mobile</label>
    <input autocomplete="off" type="text" id="mobile" name="mobile" class="form-control" placeholder="Mobile" required autofocus>
    </p>
    <p>
        <label for="smscode" class="sr-only">Smscode</label>
        <input autocomplete="off" type="password" id="smscode" name="smscode" class="form-control" placeholder="Smscode" required>
    </p>

    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <span class="btn btn-default btn-block" onclick="change('base')">用户名登录</span>
    </form>
</div>


<br>
<div class="form-signin">
    <a href="/auth/alipay">支付宝登录</a> |
    <a href="/auth/github">Github登录</a> |
    <a href="/auth/weibo">Github登录</a>
</div>

<div class="form-signin">
    <a href="/auth/weixin">微信登录</a> |
    <a href="/auth/qq">QQ登录</a>
</div>


<script>

    function doReflush(d) {
        getCaptcha();
    }

    function change(type) {
        if(type == 'base') {
            $('#sms').css('display', 'none')
            $('#base').css('display', 'block')
        }else {
            $('#sms').css('display', 'block')
            $('#base').css('display', 'none')
        }
    }


    function getCaptcha() {
        $.post('/captcha_base64', function (data) {
            if(data.code == '200') {
                $('#captchaId').val(data.data.id)
                $('#captcha').prop('src', data.data.data)
            }
        })
    }


    $(function () {
        getCaptcha()
    })
</script>
</body></html>